<template>
  <div class="max-box pdl-0 pdb-0">
    <div class="header-box">
      <div class="header-left">
        <span>标签管理</span>
      </div>
      <!-- <a-input-search
        placeholder="输入标题查询"
        @search="onSearch"
        allow-clear
        class="search-box"
      >
        <a-button slot="enterButton" icon="search"></a-button>
      </a-input-search> -->
      <a-button type="primary" class="add-btn" @click="openCenterDrawer"
        >添加标签</a-button
      >
    </div>
    <div class="content-box h100">
      <div class="table-container h100">
        <LabelTabel
          :data="tableData"
          :total="total"
          @requestTable="getLabelList"
          @deleteOne="deleteOne"
          @editOne="editOne"
        ></LabelTabel>
      </div>
    </div>
    <AddLabel
      ref="addLabel"
      :currentData="currentData"
      @update="getLabelList"
    ></AddLabel>
  </div>
</template>

<script>
import { allLabelList, deleteLabel } from "../../api/label";
import LabelTabel from "./components/LabelTabel.vue";
import AddLabel from "./components/AddLabel";
export default {
  name: "tag",
  components: { AddLabel, LabelTabel },
  data() {
    return {
      tableData: [],
      total: 0,
      visible: false,
      currentData: {},
    };
  },
  methods: {
    onSearch() {},
    getLabelList(data) {
      let requestData = {
        page: 1,
        limit: 50,
      };
      if (data) {
        requestData.page = data.page;
        requestData.limit = data.pageSize;
      }
      allLabelList(data).then((res) => {
        this.tableData = res.data;
        this.total = res.count;
      });
    },
    // 打开弹框
    openCenterDrawer() {
      this.currentData = {};
      this.$refs.addLabel.getShow(true);
    },
    deleteOne(item) {
      deleteLabel({ id: item.id }).then((res) => {
        this.getLabelList();
        this.$message.success("删除成功");
      });
    },
    editOne(item) {
      this.currentData = item;
      this.$refs.addLabel.getShow(true);
    },
  },
  mounted() {
    this.getLabelList();
  },
};
</script>

<style lang="less" scoped>
.max-box {
  width: 100%;
  padding-top: 16px;
  padding-right: 20px;
  padding-left: 20px;
  padding-bottom: 20px;
  box-sizing: border-box;
  height: 100%;
  display: flex;
  flex-direction: column;
  .header-box {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
    .header-left {
      span {
        font-size: 18px;
        color: #252b3a;
      }
      i {
        font-size: 20px;
      }
    }
    .search-box {
      width: 240px;
      height: 32px;

      /deep/ .ant-input {
        font-size: 12px;
      }
    }
    .add-btn {
      font-size: 12px;
    }
  }
  .content-box {
    background: #fff;
    width: 100%;
    box-sizing: border-box;
    flex-grow: 1;
    .tarbar-box {
      padding-bottom: 12px;
      position: relative;
      width: 100%;
      border-bottom: 1px solid rgba(0, 0, 0, 0.1);
      .tabs {
        display: flex;
        padding-left: 16px;
        align-items: center;
        .tab-one {
          padding: 12px 0 8px 0;
          margin-right: 24px;
          font-size: 12px;
          cursor: pointer;
          color: #515561;
        }
        .open-choose {
          margin-top: 3px;
          cursor: pointer;
          padding-left: 16px;
          border-left: 1px solid rgba(0, 0, 0, 0.1);

          &:hover {
            color: #048fff;
          }

          span {
            margin-right: 1px;
          }

          transition: all 1s;
        }
        .active-choose {
          color: #048fff;

          .icon-down {
            transform: rotate(180deg);
          }
        }
        .active-tab {
          color: #048fff;
          border-bottom: 2px solid #048fff;
        }
      }
    }
    .table-container {
      width: 100%;
      // height: 600px;
      background: #fff;
      display: flex;
    }
  }
}
</style>
